<template>
	<view class="choose">
		<!-- <QSNavbar :navbarItems="navbarItems_1" backgroundColor="#fff"></QSNavbar> -->
		<view class="" v-if="tabsList !='' && tabsList !=null">
			<u-sticky>
				<u-tabs :list="tabsList" lineColor="#0E9698 " :activeStyle="{
					color: '#0E9698 '
				}" :inactiveStyle="{
					color: '#c2c1c1' 
				}" :lineWidth="30" :current="currentTab" @click="onClickTab" />
			</u-sticky>
			<view class="choose-list" v-if="list.length >= 0 && list.length">
				<view class="item" v-if="currentTab == 0" v-for="item in list" :key="item.id">
					<!-- 票 -->
					<block>
						<view class="top flex-align">
							<!-- <u-image width="56rpx" height="56rpx" shape="circle"></u-image> -->
							<u-image :src="`${assetsPath}44d8d751bb60e10cc8e83c114d488541605662f5.png`" width="30rpx"
								height="30rpx" shape="square"></u-image>
							<view style="margin-left: 13rpx;">{{ item.venue_name }}</view>
						</view>
						<view class="it">
							<view class="content d-flex">
								<!-- <u-image width="160rpx" height="160rpx" radius="12rpx"></u-image> -->
								<u-image :src="item.ticket_picture" width="160rpx" height="160rpx" shape="square">
								</u-image>
								<view class="right-content  flex-grow-1 flex-column">
									<view class="flex-between" style="height: 3.5vh;">
										<view>{{ item.ticket_name }}</view>
										<view style="color: #0E9698;">待使用</view>
									</view>
									<view>
										<view class="flex-between" style="height: 3.5vh;">
											<view class="count">
												{{item.deadline}}
											</view>
											<view>数量1次</view>
										</view>
									</view>
									<view>
										<view class="flex-between" style="height: 3.5vh;">
											<view class="count">
												no.{{item.qr_code}}
											</view>
											<!-- <view class="date" >{{item.deadline}}</view> -->
										</view>
									</view>
								</view>
							</view>

							<view class="bottom d-flex justify-end">
								<view class="d-flex">
									<view class="">
										<u-button text="查看劵码" shape="circle" @click="onClick(item)"
											color="linear-gradient(0deg, #0E9698 0%, #0E9698 100%);">
										</u-button>
									</view>


								</view>
							</view>
						</view>
					</block>
				</view>
				<view class="item" v-if="currentTab == 1" v-for="item in list" :key="item.id">
					<!-- 卡 -->
					<block>
						<view class="top flex-align">
							<!-- <u-image width="56rpx" height="56rpx" shape="circle"></u-image> -->
							<u-image :src="`${assetsPath}44d8d751bb60e10cc8e83c114d488541605662f5.png`" width="30rpx"
								height="30rpx" shape="square"></u-image>
							<view style="margin-left: 13rpx;">{{ item.venue_name }}</view>
						</view>
						<view class="it">
							<view class="content d-flex">
								<!-- <u-image width="160rpx" height="160rpx" radius="12rpx"></u-image> -->
								<u-image :src="item.picture" width="160rpx" height="160rpx" shape="square">
								</u-image>
								<view class="right-content  flex-grow-1 flex-column">
									<view class="flex-between" style="height: 3.5vh;">
										<view style="width: 80%;">{{ item.card_name }}</view>
										<view style="color: #0E9698;">待使用</view>
									</view>
									<view>
										<view class="flex-between" style="height: 3.5vh;">
											<view class="count">{{ item.deadline }}</view>
											<view class="date"></view>
										</view>
									</view>
									<view>
										<view class="flex-between" style="height: 3.5vh;">
											<view class="count">{{ item.qr_code }}</view>
											<view class="date" v-if="item.card_type == 'money'">剩余：{{item.recharge }}元</view>
											<view class="date" v-if="item.card_type == 'num'">剩余：{{item.recharge }}次</view>
										</view>
									</view>
								</view>
							</view>

							<view class="bottom d-flex justify-end">
								<view class="d-flex">
									<u-button text="查看劵码" shape="circle" @click="onClick(item)"
										color="linear-gradient(0deg, #0E9698 0%, #0E9698 100%);">
									</u-button>
								</view>
							</view>
						</view>
					</block>
				</view>
				<view class="item" v-if="currentTab == 2" v-for="item in list" :key="item.id">
					<!-- 场地 -->
					<block>
						<view class="top flex-align">
							<!-- <u-image width="56rpx" height="56rpx" shape="circle"></u-image> -->
							<u-image :src="`${assetsPath}44d8d751bb60e10cc8e83c114d488541605662f5.png`" width="30rpx"
								height="30rpx" shape="square"></u-image>
							<view style="margin-left: 13rpx;">{{ item.venue_name }}</view>
						</view>
						<view class="it">
							<view class="content d-flex">
								<!-- <u-image width="160rpx" height="160rpx" radius="12rpx"></u-image> -->
								<u-image :src="item.goods.goods_image" width="160rpx" height="160rpx" shape="square">
								</u-image>
								<view class="right-content d-flex flex-grow-1 flex-column">
									<view class="flex-between">
										<view style="width: 80%;">{{ item.goods_name }}</view>
										<view style="color: #0E9698;">待使用</view>
									</view>
									<view class="flex-between" v-if="item.beShare == 1">
										<view style="color: #999999;">球友分享</view>
									</view>
									<view>
										<view class="flex-between">
											<!-- <price :value="item.price"></price> -->
											<view class="count">{{ item.start_time }}-{{ item.end_time }}</view>
											<!-- <view class="date">{{ item.end_time }}</view> -->
										</view>
									</view>
								</view>
							</view>

							<view class="bottom d-flex justify-end">
								<view class="d-flex">
									<!-- <view class="" style="margin-right: 10rpx;">
										<u-button text="适用场馆" shape="circle" @click="showVenues(item)"
											color="linear-gradient(0deg, #0E9698 0%, #0E9698 100%);">
										</u-button>
									</view> -->
									<u-button text="查看劵码" shape="circle" @click="onClick(item)"
										color="linear-gradient(0deg, #0E9698 0%, #0E9698 100%);">
									</u-button>
								</view>
							</view>
						</view>
					</block>
				</view>
				<!-- 培训班 -->
				<view class="item" v-if="currentTab == 3" v-for="item in list" :key="item.id">
					<block>
						<view class="top flex-align">
							<!-- <u-image width="56rpx" height="56rpx" shape="circle"></u-image> -->
							<u-image :src="`${assetsPath}44d8d751bb60e10cc8e83c114d488541605662f5.png`" width="30rpx"
								height="30rpx" shape="square"></u-image>
							<view style="margin-left: 13rpx;">{{ item.salevenue }}</view>
						</view>
						<view class="it">
							<view class="content d-flex">
								<!-- <u-image width="160rpx" height="160rpx" radius="12rpx"></u-image> -->
								<u-image :src="item.cover" width="160rpx" height="160rpx" shape="square">
								</u-image>
								<view class="right-content d-flex flex-grow-1 flex-column">
									<view class="flex-between">
										<view style="width: 80%;">{{ item.name }}</view>
										<view style="color: #0E9698;">待使用</view>
									</view>
									<!-- v-if="item.beShare == 1" -->
									<view class="">
										<view class="date"><text>{{ item.student_name }}</text></view>
										<view class="date"><text>{{ item.custodian_mobile }}</text></view>
									</view>
									<view>
										<view class="flex-between">
											<!-- <price :value="item.price"></price> -->
											<view class="count" v-if="item.train_enum_id == 1">{{ item.sku }}</view>
											<view class="count" v-else>
												{{item.area_name}}{{item.train_class_name}}{{item.train_item_name}}
											</view>
											<!-- <view class="date">{{ item.end_time }}</view> -->
										</view>
									</view>
								</view>
							</view>

							<view class="bottom d-flex justify-end">
								<view class="d-flex">
									<u-button text="查看劵码" shape="circle" @click="onClick(item)"
										color="linear-gradient(0deg, #0E9698 0%, #0E9698 100%);">
									</u-button>
								</view>
							</view>
						</view>
					</block>
				</view>
				<view class="item" v-if="currentTab == 4" v-for="item in list" :key="item.id">
					<!-- 赛事 -->
					<block>
						<view class="top flex-align">
							<!-- <u-image width="56rpx" height="56rpx" shape="circle"></u-image> -->
							<u-image :src="`${assetsPath}44d8d751bb60e10cc8e83c114d488541605662f5.png`" width="30rpx"
								height="30rpx" shape="square"></u-image>
							<view style="margin-left: 13rpx;">{{ item.salevenue }}</view>
						</view>
						<view class="it">
							<view class="content d-flex">
								<!-- <u-image width="160rpx" height="160rpx" radius="12rpx"></u-image> -->
								<u-image :src="item.race_img" width="160rpx" height="160rpx" shape="square">
								</u-image>
								<view class="right-content d-flex flex-grow-1 flex-column">
									<view class="flex-between">
										<view style="width: 80%;">{{ item.race_name }}</view>
										<view style="color: #0E9698;">待使用</view>
									</view>

									<view>
										<view class="flex-between">
											<!-- <price :value="item.price"></price> -->
											<view class="count">{{ item.start_time }}-{{ item.end_time }}</view>
											<!-- <view class="date">{{ item.end_time }}</view> -->
										</view>
									</view>
								</view>
							</view>

							<view class="bottom d-flex justify-end">
								<view class="d-flex">
									<!-- <view class="" style="margin-right: 10rpx;">
										<u-button text="适用场馆" shape="circle" @click="showVenues(item)"
											color="linear-gradient(0deg, #0E9698 0%, #0E9698 100%);">
										</u-button>
									</view> -->
									<u-button text="查看劵码" shape="circle" @click="onClick(item)"
										color="linear-gradient(0deg, #0E9698  0%, #0E9698 100%);">
									</u-button>
								</view>
							</view>
						</view>
					</block>
				</view>

			</view>
			<u-empty v-else text="暂无数据" icon="http://cdn.uviewui.com/uview/empty/data.png" />
		</view>
		<u-empty v-if="tabsList == null || tabsList == '' " text="暂无数据"
			icon="http://cdn.uviewui.com/uview/empty/data.png" />
		
	</view>

</template>

<script>
	import conAlert from "@/components/com-alert/com-alert.vue";
	import {
		serialize
	} from '@/utils/util.js';
	const index = require("@/api/index/index.js");
	export default {
		components: {
			conAlert
		},
		data() {
			return {
				assetsPath: this.$https.assetsPath,
				is: 1,
				data: null,
				// tabbar_index: 2,
				tabbar_index: 0,
				currentTab: 0,
				tabsList: [{
						count: 2,
						name: "门票",
						type: "ticket",
					},
					{
						count: 131,
						name: "会员卡",
						type: "card",
					},
					{
						count: 23,
						name: "场地",
						type: "court",
					},
					// {
					// 	count: 1,
					// 	name: "培训班",
					// 	type: "train",
					// },
					// {
					// 	count: 12,
					// 	name: "赛事",
					// 	type: "enroll",
					// }
				],
				list: [],
				assetsPath: this.$https.assetsPath,
				homeData: {},
				show: false,
				type: '',
				alertShow: false,
				ticketData: [],
				totalPage: "",
				status: "loading",
				detail: {
					list: [],
					tabList: [], //图标菜单
					hiddenTab: false, //隐藏tab
				},
				page: 1,
				page_url: '/pages/consumption-code/consumption-code',
				navbarItems_1: [{
					layout: "left",
					type: "text",
					text: "消费码",
					width: 15,
					weight: "bold",
					color: "#000",
				}, ],
				listQuery: { //分页
					limit: 5,
					page: 1,
				},
				totalPage: "",
			}
		},
		onLoad(options) {
			this.getTicketList()

		},
		methods: {
			// 获取我的卡包
			async cardlist() {
				let that = this;
				if (this.listQuery.page === 1) that.list = [];

				let postData = {
					page: this.listQuery.page,
					limit: this.listQuery.limit,
				};
				let res = await index.bill_card(postData);
				if (res.code === 1) {
					this.list = this.list.concat(res.data.rows); //将数据拼接在一起
					that.totalPage = res.data.last_page
				} else if (res.code == -1) {
					uni.showToast({
						title: res.msg,
						duration: 1000,
						icon: 'none'
					});
					setTimeout(() => {
						wx.clearStorageSync()
						wx.clearStorage()
						uni.switchTab({
							url: '/pages/personal/personal', //跳去登录页
						})
					}, 2000)
				}
			},
			// 获取票据列表
			async getTicketList() {
				let that = this;
				if (this.listQuery.page === 1) that.list = [];
				let postData = {
					page: this.listQuery.page,
					limit: this.listQuery.limit,
				};
				let res = await index.bill_ticket(postData);
				if (res.code === 1) {
					this.list = this.list.concat(res.data.rows); //将数据拼接在一起
					that.totalPage = res.data.last_page
				} else if (res.code == -1) {
					uni.showToast({
						title: res.msg,
						duration: 1000,
						icon: 'none'
					});
					setTimeout(() => {
						wx.clearStorageSync()
						wx.clearStorage()
						uni.switchTab({
							url: '/pages/personal/personal', //跳去登录页
						})
					}, 2000)
				}
			},
			// 获取我的场地详情
			async getMyCourt() {
				let params = {
					project_id: getApp().globalData.projectId,
					app_id: this.$https.weixinAppId,
					open_id: uni.getStorageSync("openid"),
					// status: 0,
					id: '',
					expired: this.currentTab,
					limit: 5,
					page: this.page,
				}
				let res = await index.getMyCourt(params)
				if (res.code === 1) {
					this.list = this.list.concat(res.data.rows); //将数据拼接在一起
					that.totalPage = res.data.last_page
				} else if (res.code == -1) {
					uni.showToast({
						title: res.msg,
						duration: 1000,
						icon: 'none'
					});
					setTimeout(() => {
						wx.clearStorageSync()
						wx.clearStorage()
						uni.switchTab({
							url: '/pages/personal/personal', //跳去登录页
						})
					}, 2000)
				}
			},
			// 下拉刷新
			onReachBottom() {
				if (this.totalPage <= this.listQuery.page) {
					uni.showToast({
						title: '没有更多了',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				this.listQuery.page += 1;
				if (this.currentTab == 0) {
					this.getTicketList()
				} else if(this.currentTab == 1) {
					this.cardlist()
				} else if(this.currentTab == 2) {
				}
			},

			onClickTab({
				index
			}) {
				this.currentTab = index;
				this.list = []
				this.listQuery.page = 1
				if (index == 0) {
					this.type = 'ticket';
					this.getTicketList();
				} else if (index == 1) {
					this.type = 'card';
					this.cardlist()
				} else if (index == 2) {
					this.type = 'court';
					this.getMyCourt()
				}
			},
			onClick(item) {
				console.log(item,'[[[]]]')
				console.log(this.currentTab,'[[[]]]')
				if (this.currentTab == 0) {
					uni.setStorageSync('userInfo', res.data)
					uni.setStorageSync('token', res.data.token)
					uni.switchTab({
						url: '../../pages/consumption-code/consumption-code?ticket_name=' + item.ticket_name + '&venue_name=' + item.venue_name + '&qr_code=' + item.qr_code + '&currentTab=' + this.currentTab+ '&fing=' + 1
					})
				} else if (this.currentTab == 1) {
					uni.switchTab({
						url: '../../pages/consumption-code/consumption-code?card_name=' + item.card_name + '&venue_name=' + item.venue_name + '&qr_code=' + item.qr_code + '&currentTab=' + this.currentTab+ '&fing=' + 1
					})
				} else if (this.currentTab == 2) {
					uni.switchTab({
						url: '/pages/consumption-code/consumption-code?ticket_name=' + item.ticket_name + '&venue_name=' + item.venue_name + '&qr_code=' + item.qr_code + '&currentTab=' + this.currentTab+ '&fing=' + 1
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.choose {
		width: 100%;
		height: 100vh;
		// height: calc(100vh + 130rpx );
		background-color: #f3f3f3;
		padding-bottom: env(safe-area-inset-bottom);
		overflow-y: auto;

		.blues {
			color: #0E9698 ;
		}

		.blacks {
			color: #828282;
		}

		/deep/.u-tabs {
			background-color: #fff;
			padding: 0 20rpx;

			.u-tabs__wrapper__nav__line {
				bottom: 0;
			}
		}

		.choose-list {
			padding: 0rpx 20rpx 20rpx 20rpx;

			.item {
				border-radius: 20rpx;
				padding: 30rpx 24rpx 0;
				background-color: #fff;
				// margin-bottom: 30rpx;
				margin-top: 30rpx;

				.right-content {
					margin-left: 10rpx;
					justify-content: space-between;
					font-size: 28rpx;
					color: rgb(51, 51, 51);
				}

				.date {
					display: inline-block;
					background-color: #f3f3f3;
					color: #888;
					font-size: 24rpx;
					border-radius: 100px;
					padding: 5rpx 10rpx;
				}

				.bottom {
					margin-top: 30rpx;

					/deep/.u-button {
						width: 174rpx;
						height: 60rpx;
					}
				}

				.it {
					padding: 36rpx 0;

					&+.it {
						border-top: 1px solid rgb(243, 243, 243);
					}
				}
			}
		}

		// 弹窗

		.select-list {
			height: 50vh;
			overflow: auto;

			// padding-bottom: 30rpx;
			.item {
				margin-bottom: 20rpx;
				// padding-bottom: 20rpx;
				height: 150rpx;
				border-bottom: 1px solid #cccccc;

				&:last-of-type {
					border: none;
					margin: 0;
					padding: 0;
				}

				.image {
					width: 150rpx;
					height: 100%;

					/deep/ .vue-ref {
						width: 100%;
						height: 100%;
					}
				}

				.detail {
					display: flex;
					height: 100%;
					flex: 1;
					width: 0;
					margin-left: 20rpx;
					flex-direction: column;
					justify-content: space-between;

					.name {
						font-weight: 700;
						font-size: 28rpx;
						margin-bottom: 15rpx;
					}

					.timer {
						color: #cacaca;
						font-size: 20rpx;
					}

					.bottom {
						font-size: 20rpx;
						color: #cacaca;

						.address {
							width: 70%;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
				}
			}
		}
	}
</style>